import React from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
import LocalStorageService from "../../../utils/LocalStorageService";
import DefaultAvatar from "../../../res/images/web/shared/guan touxiang@2x.png";
import LvMark from "../../../shared-components/LvMark/LvMark";
import CommentIcon from "../../../res/images/web/topic/talk@2x.png";
import TopicItem from "../../topic/TopicItem/TopicItem";
import ScrollList from "../../../shared-components/ScrollList/ScrollList";

class MyTopics extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            height: document.documentElement.clientHeight - 50,
            p: 0,
        }
    }

    componentDidMount() {
        this.get()
    }

    get = () => {
        const uid = this.uid
        const p = this.state.p
        const zan = 1
        this.props.doGetMyTopics({uid, p, zan})
    }

    delete = (topic) => {
        const id = topic.Id
        const uid = this.uid
        this.props.doDeleteMyTopic({id, uid,})
    }

    onScroll = e => {
        const end = this.props.topic.myTopics.end
        if (end) {
            return
        }
        const top = e.target.scrollTop
        const hei = e.target.scrollHeight
        const cHei = document.documentElement.clientHeight
        const gap = hei - top - cHei + 50
        if (gap < 200) {
            this.setState({
                p: this.state.p + 1,
            }, () => this.get())
        }

    }

    render() {
        const history = this.props.history
        const myTopics = this.props.topic.myTopics
        const end = myTopics.end
        const lists = myTopics.lists
        const myTopicList = []
        const ps = Object.keys(lists)
        ps.map(p => myTopicList.push(...lists[p]))

        const listTemplate = myTopicList.map((topic, index) => <TopicItem
            key={index}
            topic={topic}
            history={history}
            canDelete={true}
            onDelete={() => this.delete(topic)}
        />)
        return <ScrollList
            endCondition={end}
            ctnStyle={{
                height: this.state.height,
                overflowY: 'scroll',
            }}
            gap={50}
            endHeight={200}
            scrollCallback={() => {
                this.setState({
                    p: this.state.p + 1,
                }, () => this.get())
            }}
        >
            {listTemplate}
        </ScrollList>
        return <div
            className='topic-list-ctn'
            style={{height: this.state.height, overflowY: 'scroll',}}
            onScroll={e => this.onScroll(e)}
            ref={el => this.listCtn = el}
        >
            {listTemplate}
        </div>
    }

}

const mapState = state => ({
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    doGetMyTopics: payload => dispatch.topic.doGetMyTopics(payload),
    doDeleteMyTopic: payload => dispatch.topic.doDeleteMyTopic(payload),
})

export default connect(mapState, mapDispatch)(withRouter(MyTopics))
